.container{
    width:500px;
    height: 500px;
    background-color: $bg-color;
    box-sizing: border-box;
    overflow: hidden;
    //头部搜索框
    header {
        h3 {
            text-align: center;
        }
        .top {
            padding: 20px;
            .new-todo {
                width: 300px;
                height: 30px;
                border: solid 1px $gray;
                border-radius: 5px;
            }
            .top-btn {
                height: 30px;
                margin-left: 20px;
                font-size: 16px;
                border-radius: 5px;
                border: solid 1px $gray;
                color:rgb(85, 81, 81)
            }
        }
    }
    
    // Todo部分
    .todo-list{
        padding: 20px;;
        position: relative;
        width:100%;
        box-sizing: border-box;
        background-color: $gray;
        height: 300px;
        overflow: auto;
        .todo-item{
            display: flex;
            width:100%;
            margin: 20px  0px 20px 0px;
            background-color: bisque;
            height: 30px;
            .toggle {
                width:20px;
                height: 20px;
            }
            .todo-right {
                margin-left: 20px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .todo-del{
                    position: absolute;
                    right: 25px;
                }
            }
        }
    }

    // Footer
    .todo-footer {
        padding: 20px;
        display: flex;
        align-items: center;
        .toggle {
            width:20px;
            height: 20px;
        }
        .tip {
            margin-left: 10px;
        }
        .btn-danger {
            margin-left: 20px;
            color: $danger;

        }
    }
}